<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background: rgba(0, 0, 0);
    }
    #canvas {
      background: url("./grid.jpg") 0% 0%;
      background-size: 20px 20px;
    }
    .setting-area {
      color: #fff;
      text-align: left;
      margin: 20px auto;
      width: 500px;
    }
    .setting-area div {
      margin-top: 20px;
    }
    .content {
      text-align: center;
    }
  </style>
  <body>
    <div class="content">
      <canvas id="canvas" width="500" height="500">不支持Canvas</canvas>
    </div>
    <div class="setting-area">
      <div>
        功能：
        <span>
          <input
            type="radio"
            value="drawRadio"
            id="drawRadio"
            checked
            name="draw"
          />
          <label for="huey">画图</label>
        </span>
        <span>
          <input type="radio" value="eraser" id="eraser" name="draw" />
          <label for="huey">橡皮擦</label>
        </span>
      </div>

      <div>
        橡皮擦大小
        <select name="" id="eraserWidthSelect">
          <option value="10">10px</option>
          <option value="40" selected>20px</option>
          <option value="80">30px</option>
          <option value="100">40px</option>
        </select>
      </div>
      <div>
        橡皮擦形状
        <select name="" id="eraserShapeSelect">
          <option value="circle" selected>圆形</option>
          <option value="rectangle">方形</option>
        </select>
      </div>
      <div>
        线条颜色
        <select name="" id="strokeStyleSelect">
          <option value="red">红色</option>
          <option value="yellow">黄色</option>
          <option value="blue" selected>蓝色</option>
        </select>
      </div>
      <div>
        填充颜色
        <select name="" id="fillStyleSelect">
          <option value="red">红色</option>
          <option value="yellow">黄色</option>
          <option value="blue" selected>蓝色</option>
        </select>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
